<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分步表单</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<div class="layui-fluid">
					<div class="layui-card">
						<div class="layui-card-body" style="padding-top: 40px;">
							<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
								<div carousel-item>
									<div>
										<form class="layui-form"
											style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
											<div class="layui-form-item">
												<label class="layui-form-label">工号:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入工号" class="layui-input"
														lay-verify="number" required />

												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">讲师姓名:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入讲师姓名" value=""
														class="layui-input" required>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">手机号码:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入手机号码" class="layui-input"
														lay-verify="number" required />

												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课程名称:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入课程名称" value=""
														class="layui-input" required>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课时:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入课时" class="layui-input"
														lay-verify="number" required />

												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课时费:</label>
												<div class="layui-input-block">
													<input type="text" placeholder="请输入课时费" value="" class="layui-input"
														required>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">是否已发放:</label>
												<div class="layui-input-block">
													<input type="checkbox" name="flag" lay-skin="switch"
														lay-text="已发放|未发放">
												</div>
											</div>

											<div class="layui-form-item">
												<div class="layui-input-block">
													<button class="layui-btn" lay-submit lay-filter="formStep">
														&emsp;下一步&emsp;
													</button>
												</div>
											</div>
										</form>
									</div>
									<div>
										<form class="layui-form"
											style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
											<div class="layui-form-item">
												<label class="layui-form-label">工号:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">639537</div>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">讲师姓名:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）
													</div>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">手机号码:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">
														<span style="font-size: 18px;color: #333;">1800 元</span>
													</div>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课程名称:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">保险箱</div>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课时:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">人工入款</div>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">课时费:</label>
												<div class="layui-input-block">
													<div class="layui-form-mid layui-word-aux">备注说明</div>
												</div>
											</div>
											<div class="layui-form-item">
												<div class="layui-input-block">
													<button type="button"
														class="layui-btn layui-btn-primary pre">上一步</button>
													<button class="layui-btn" lay-submit lay-filter="formStep2">
														&emsp;确认入款&emsp;
													</button>
												</div>
											</div>
										</form>
									</div>
									<div>
										<div style="text-align: center;margin-top: 90px;">
											<i class="layui-icon layui-circle"
												style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
											<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
												入款成功
											</div>
											<div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
										</div>
										<div style="text-align: center;margin-top: 50px;">
											<button class="layui-btn next">再入一笔</button>
											<button class="layui-btn layui-btn-primary">查看账单</button>
										</div>
									</div>
								</div>
							</div>
							<hr>
							<div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
								<h3>说明</h3><br>
								<h4>入款到保险箱</h4>
								<p>如果需要，这里可以放一些关于产品的常见问题说明。</p>
								<br>
								<h4>入款到现金</h4>
								<p>如果需要，这里可以放一些关于产品的常见问题说明。</p>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script>
			layui.use(['form', 'step'], function() {
				var $ = layui.$,
					form = layui.form,
					step = layui.step;

				step.render({
					elem: '#stepForm',
					filter: 'stepForm',
					width: '100%', //设置容器宽度
					stepWidth: '750px',
					height: '500px',
					stepItems: [{
						title: '填写培训费用信息'
					}, {
						title: '确认培训费用信息'
					}, {
						title: '完成'
					}]
				});


				form.on('submit(formStep)', function(data) {
					step.next('#stepForm');
					return false;
				});

				form.on('submit(formStep2)', function(data) {
					step.next('#stepForm');
					return false;
				});

				$('.pre').click(function() {
					step.pre('#stepForm');
				});

				$('.next').click(function() {
					step.next('#stepForm');
				});
			})
		</script>
	</body>
</html>